// vite.config.ts
import vue from '@vitejs/plugin-vue'
import { ConfigEnv, loadEnv, UserConfig } from 'vite'

import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')

// 自动导入插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

// element-Plus 插件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

// 配置 SVG 图标
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// Unocss 是一个基于模板的无用 CSS 移除工具。自动从项目中删除未使用的 CSS 样式，以减少文件大小和加快加载速度。
import UnoCSS from 'unocss/vite'

// 启动mock服务，模拟后端接口
import { viteMockServe } from 'vite-plugin-mock'

// 组件命名插件
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// 压缩插件
import viteCompression from 'vite-plugin-compression'

// 检查大模块来源
import { visualizer } from 'rollup-plugin-visualizer'

import dayjs from 'dayjs' // 引入时间格式化库

// html插件
import { createHtmlPlugin } from 'vite-plugin-html'

export default ({ mode }: ConfigEnv): UserConfig => {
	const env = loadEnv(mode, process.cwd())
	const timestamp = dayjs().format('YYYYMMDDHHmmss') // 生成时间戳
	return {
		// 全局配置到人简写
		resolve: {
			alias: {
				'@': path.resolve(__dirname, './src'),
				'@api': path.resolve(__dirname, 'src/api'),
				'@views': path.resolve(__dirname, 'src/views'),
				'@utils': path.resolve(__dirname, 'src/utils'),
				'@comp': path.resolve(__dirname, 'src/components'),
				'@assets': path.resolve(__dirname, 'src/assets'),
			},
		},
		plugins: [
			vue(),
			VueSetupExtend(), // 组件命名插件 <script lang="ts" setup name="组件名称"></script>

			// element-Plus 自动导入插件 插件 - start
			AutoImport({
				// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
				imports: ['vue'],
				eslintrc: {
					enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false
					filepath: './.eslintrc-auto-import.json', // 指定自动导入函数 eslint 规则的文件
				},
				resolvers: [
					// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
					ElementPlusResolver(),
					// 自动导入图标组件
					IconsResolver({}),
				],
				vueTemplate: true, // 是否在 vue 模板中自动导入

				dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts'), // 指定自动导入函数TS类型声明文件路径
			}),
			Components({
				resolvers: [
					// 自动导入 Element Plus 组件
					ElementPlusResolver(),
					// 自动注册图标组件
					IconsResolver({
						enabledCollections: ['ep'], // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
					}),
				],
				dts: path.resolve(pathSrc, 'types', 'components.d.ts'), // 指定自动导入组件TS类型声明文件路径
			}),
			Icons({
				// 自动安装图标库
				autoInstall: true,
			}),
			// element-Plus 自动导入插件 插件 - end

			// 配置 SVG 图标
			createSvgIconsPlugin({
				// 指定需要缓存的图标文件夹
				iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
				// 指定symbolId格式
				symbolId: 'icon-[dir]-[name]',
			}),

			// Unocss 是一个基于模板的无用 CSS 移除工具。自动从项目中删除未使用的 CSS 样式，以减少文件大小和加快加载速度。
			UnoCSS({
				/* options */
			}),
			// mock服务，模拟后端接口
			viteMockServe({
				// supportTs: true, // 支持 TypeScript Mock 文件
				mockPath: './src/mock', // Mock 文件路径
				// localEnabled: env.VITE_APP_USE_MOCK === 'true', // 仅在开发模式启用 Mock
				// prodEnabled: false, // 生产环境禁用 Mock
				logger: true, // 启用 Mock 请求日志
			}),
			viteCompression({
				ext: '.gz', // 输出 Gzip 文件
				threshold: 10240, // 对超过 10 KB 的文件进行压缩
				algorithm: 'gzip', // 使用 gzip 压缩算法
				deleteOriginFile: false, // 保留原始文件
			}),
			// 动态注入插件 打包分析
			createHtmlPlugin({
				inject: {
					data: {
						// 注入构建时间戳
						BUILD_TIMESTAMP: new Date().getTime(),
					},
				},
			}),
		],
		css: {
			// CSS 预处理器
			preprocessorOptions: {
				//define global scss variable
				scss: {
					javascriptEnabled: true,
					additionalData: `@use "@/styles/variables.scss" as *;`,
					api: 'modern-compiler', // or 'modern'
				},
			},
		},
		// 跨越处理
		server: {
			host: '0.0.0.0',
			port: Number(env.VITE_APP_PORT),
			open: true, // 是否自动打开浏览器
			// 反向代理解决跨域
			proxy: {
				[env.VITE_APP_BASE_API]: {
					target:
						env.VITE_NODE_ENV === 'development'
							? `http://192.168.0.16:8090` // 本地环境
							: env.VITE_NODE_ENV === 'test'
								? `https://matdesign.cloud` // 测试环境,
								: `https://matdesign.cloud`, // 生产环境

					changeOrigin: true,
					rewrite: (path) =>
						path.replace(new RegExp(`^${env.VITE_APP_BASE_API}`), ''),
				},
			},
			hmr: {
				overlay: true,
			},
		},
		// 打包配置
		build: {
			minify: 'terser',
			// 进行压缩计算
			// brotliSize: true, // 收集 brotli 大小并将其显示
			//指定输出路径
			assetsDir: './',
			// 指定输出文件路径
			outDir: 'dist',
			// 代码压缩配置
			terserOptions: {
				// 生产环境移除console
				compress: {
					drop_console: true,
					drop_debugger: true,
				},
			},
			cssCodeSplit: true,
			chunkSizeWarningLimit: 2000, // 大文件报警阈值设置, 不建议使用
			rollupOptions: {
				input: 'index.html',
				output: {
					//静态资源分类打包
					chunkFileNames: `static/js/[name]-[hash]-${timestamp}.js`,
					entryFileNames: `static/js/[name]-[hash]-${timestamp}.js`,

					assetFileNames: (assetInfo: any) => {
						if (assetInfo.name.endsWith('.css')) {
							return `static/css/[name]-[hash]-${timestamp}.[ext]`
						}
						if (
							['png', 'jpg', 'svg', 'PNG', 'jpeg'].some((ext) =>
								assetInfo.name.endsWith(ext)
							)
						) {
							return `static/img/[name]-${timestamp}.[ext]`
						}
						if (
							['ttf', 'woff', 'woff2'].some((ext) =>
								assetInfo.name.endsWith(ext)
							)
						) {
							return `static/fonts/[name]-${timestamp}.[ext]`
						}
						return `static/assets/[name]-${timestamp}.[ext]`
					},
					manualChunks(id) {
						if (id.includes('node_modules')) {
							if (id.includes('element-plus')) {
								return 'vendor-element-plus' // 单独拆分 Element Plus
							}
							if (id.includes('vue')) {
								return 'vendor-vue' // 单独拆分 Vue
							}
							return 'vendor' // 其他依赖
						}
					},
				},
				plugins: [visualizer()],
			},
			sourcemap: true, // 开启 Source Map
		},
		base: '/', // 相对路径设置
	}
}
